{% extends "base.html" %}

{% block head %}
    <link rel="stylesheet" href="{{ static_url("css/simplePagination.css") }}" type="text/css" />
    <style>
      .text-left{
        text-align:left;
      }
      .horizontal_search{
        margin-top: 20px;
      }
      .horizontal_search td {
        height:auto;
        padding-left:10px;
        vertical-align:center;
      }
      .no_results {
        font-weight:bold;
        font-size:18px;
        padding-left:10px;
      }
      .no_results span {
        color:red;
      }
    </style>
    <script>
        $(function(){
          $("#autocomplete").autocomplete({
            autoFocus:true,
            source: "/words",
          });
        });
    </script>
    <script src="{{ static_url("js/jquery.simplePagination.js") }}"></script>
{% end %}

{% block body %}

    <div class="container_12">
      <form id="form_search" action="/search_pattern" method="GET">
          <div class="grid_12">
              <table class="horizontal_search">
                <tr>
                   <td>
                    <input id="autocomplete" name="search_pattern" value="{{entries["search_pattern"]}}" autocomplete="off" size="30">
                   </td>
                   <td>
                    <input id="search" type="image" src="{{ static_url("images/search_button.png") }}" alt="搜索" value="搜索" height="25">
                   </td>
                </tr>
              </table>
          </div>
      </form>
    </div>

    {% if entries.has_key("no_results") and entries["no_results"] %}
    <div class="container_12">
      <div class="grid_12">
        <span class="no_results">没有找到为<span>"{{entries["search_pattern"]}}"</span>的结果.</span>
      </div>
    </div>
    {% else %}
    <div class="container_12">
    <div id="resource" style="display:none">
      {% for entry in entries["data"] %}
        <div class="grid_12">
          <h5><a href="/detail/{{entry["id"]}}">{{ entry["title"] }}</a></h5>
          <p>{{ entry["rel_link"] }}</p>
          <p>{{ entry["content"] }}</p>
        </div>
      {% end %}
    </div>
    <div id="page_container" class="grid_12">
    </div>
    <div class="grid_12 text-left">
      <div id="pagination"></div>
    </div>
    <script>
      var page_container = $("#page_container");
      $('#pagination').pagination({
      items: {{ entries["totalno"] }},
      itemsOnPage: 20,
      cssStyle: 'light-theme',
      prevText: "上一页",
      nextText: "下一页",
      displayedPages: 10,
      edges: 1,
      onPageClick:function(number){
                    //clear up container fadeout animate
                    page_container.fadeOut("faster", function(){page_container.html("")});
                    //add list of the content fadein animate
                    page_container.fadeIn("slow", function(){
                        page_fadein(page_container, number);
                    })
                  },
      onInit:function(){
               all_elements = $("#resource").children();
               page_fadein(page_container,1);
             }
      });
      
      function page_fadein(page_container,number){
        offset = 20;
        current = (number-1)*offset;
        current_offset = ((number-1)*offset)+offset;
        for(var i=current; i<=current_offset; i++){
            page_container.append(all_elements[i]);
        }
      }

      function form_search_submit(){
         $('form_search').submit()
      }
      $('search').bind('click', form_search_submit());

    </script>
    </div>
    {% end %}
{% end %}
